<template>
  <div>
    <!-- 导航 -->
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <!-- 支付剩余时间 -->
    <div class="box1">
      <div class="RemainingTime">支付剩余时间</div>
      <div class="RemainingTimeone">29:59</div>
      <div class="RemainingTimetwo">金榜登科第一中学-2022年艺体生招生考<br>试-报名费<span>520.0元</span></div>
      <van-divider />
    </div>
    <div class="SelectPay">选择支付方式</div>
    <div>
      <div class="Alipay">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <!-- <img :src="zfb" alt="" width="50px"> -->
            <van-cell title="支付宝" clickable @click="radio = '1'" class="cell1">
              <template #right-icon>
                <van-radio name="1" style="float:right"/>
              </template>
            </van-cell>
            <van-cell title="微信" clickable @click="radio = '2'" class="cell2">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="btn">
        <van-button type="info" class="pay" @click="payResult">确认支付 0.0</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/navBar.vue'
export default {
  data(){
    return{
      // 标题  路由
      title:'支付',
      route:'/CollegeMajor',
      radio:'1',
      zfb:require('@/assets/zfb.png')
    }

  },
    components:{
    NavBar,
  },
  methods:{
    payResult(){
      this.$router.push({path:'payResult'})
    }
  }
}
</script>

<style scoped>
.box1{
  margin-top: 20px;
}
.RemainingTime{
	color: rgba(80, 80, 80, 1);
	font-size: 14px;
	line-height: 150%;
  text-align: center;
  margin-top: 15px;
}
.RemainingTimeone{
	color: rgba(80, 80, 80, 1);
	font-size: 28px;
	line-height: 150%;
	text-align: center;
}
.RemainingTimetwo{

	height: 42px;
  margin-left: 30px;
	margin-top: 15px;
	color: rgba(80, 80, 80, 1);
	font-size: 14px;
	line-height: 150%;
	text-align: left;
  position:relative;
  left: 0;
  top: 0;
}
.RemainingTimetwo span{
  position:absolute;
  right: 15px;
  top: 9px;
  color: rgba(255, 141, 26, 1);
	font-size: 14px;
	line-height: 150%;
	text-align: left;
}
.SelectPay{
  color: rgba(128, 128, 128, 1);
	font-size: 12px;
	line-height: 150%;
	text-align: left;
  margin-left: 30px;
}
.Alipay{
  width: 90%;
  margin-left: 20px;
  margin-top: 20px;
  float: left;
  margin-bottom: 50px;
}
.cell1::before{
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: url('../../assets/zfb.png') no-repeat;
  background-size: contain;
  margin-right: 5px;
  border-radius: 50%;
  margin-top: 1px;
}
.cell2::before{
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: url('../../assets/wx.svg') no-repeat;
  background-size: contain;
  margin-right: 5px;
  border-radius: 50%;
  margin-top: 1px;
}
.btn{
  margin: 0 auto;
  width: 80%;
}
.pay{
  width: 100%;
  border-radius: 4px;
}
</style>
